<template>
  <div>
    <el-card>
      <!-- 行内表单三级联动全局组件 -->
      <Level3Linkage @getCategoryId="getCategoryId" />
    </el-card>
    <el-card style="margin-top:20px">
      <!-- 添加属性按钮 -->
      <el-button type="primary" icon="el-icon-plus">添加属性</el-button>
      <!-- 展示平台属性 -->
      <el-table
        :data="attrList"
        style="width: 100%;margin-top:20px"
        border=""
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        />
        <el-table-column
          prop="attrName"
          label="属性名称"
          width="180"
        />
        <el-table-column
          prop="prop"
          label="属性值列表"
          width="width"
        >
          <!-- Tag标签 -->
          <template slot-scope="{row}">
            <el-tag v-for="item in row.attrValueList" :key="item.id" style="margin:0 20px">{{ item.valueName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="prop"
          label="操作"
          width="180"
        >
          <template slot-scope="">
            <el-button type="warning" icon="el-icon-edit" size="mini" />
            <el-button type="danger" icon="el-icon-delete" size="mini" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Attr',
  data() {
    return {
      // 子组件收集的1id，2id，3id
      cForm: {},
      // 三级表单选择完成，触发回调，该字段接受平台属性
      attrList: []
    }
  },
  methods: {
    // 自定义事件的回调函数，Level3Linkage子组件向父组件Attr传递cForm对象获取三级分类的id
    getCategoryId(cForm) {
      // 获取平台属性
      this.cForm = cForm
      this.getAttrList()
    },
    // 获取平台属性的数据
    // 当用户确定三级分类数据时，可以向服务器发送请求获取平台属性进行展示
    async getAttrList() {
      // 获取分类ID
      const { category1Id, category2Id, category3Id } = this.cForm
      const result = await this.$API.attr.reqAttrInfoList(category1Id, category2Id, category3Id)
      console.log(result)
      if (result.code === 200) {
        this.attrList = result.data
      }
    }
  }
}
</script>

<style>

</style>
